<template>
  <div class="toolingHistory">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card class="box-card" shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <dialogForm ref="dialogForm"/>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import toolinghistoryApi from '@/api/Tooling/toolingHistory'
import eFormCheckApi from '@/api/eForm/eFormCheck'
import dialogForm from './components/dialogForm'
export default {
  name: 'ToolingHistory',
  components: { dialogForm },
  filters: {

  },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      infoForm: {},
      selectList: {},
      searchTags: [
        { label: this.$t('formNo'), prop: 'formNo', tag: 'DynInput' },
        { label: this.$t('formType'), prop: 'formType', tag: 'DynSelect', translate: true },
        { label: this.$t('toolingBarcode'), prop: 'toolingBarcode', tag: 'DynInput' },
        { label: this.$t('toolingModel'), prop: 'toolingModel', tag: 'DynInput' }
      ],
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'formNo', label: this.$t('formNo'), width: '150px' },
        { prop: 'formTypeView', label: this.$t('formType'), templete: (_scope) => {
          return (
            <span>{this.$t(_scope.row.formTypeView)}</span>
          )
        } },
        { prop: 'toolingBarcode', label: this.$t('toolingBarcode') },
        { prop: 'toolingModel', label: this.$t('toolingModel') },
        { prop: 'formStatus', label: this.$t('formStatus'), templete: (_scope) => {
          return (
            <el-tag type={this.statusFilter(_scope.row.formStatus)} effect='dark'> { _scope.row.formStatus } </el-tag>
          )
        } },
        { prop: 'result', label: this.$t('EnumCheckItemFinalResult_Result'), templete: (_scope) => {
          return (
            <el-tag type={this.statusFilter(_scope.row.result)} effect='dark'> { _scope.row.result } </el-tag>
          )
        } },
        { prop: 'creator', label: this.$t('creator') },
        { prop: 'createTime', label: this.$t('createTime') },
        { prop: '', label: this.$t('action'), width: '100px', templete: (_scope) => {
          return (
            <el-link
              underline={false}
              type='primary'
              on-click={() => this.handleDetail(_scope.row.id)}
            >{ this.$t('details') }</el-link>
          )
        } }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initList()
    this.getFormTypeList()
  },
  mounted() {},
  methods: {
    // 初始化
    async initList() {
      const res = await toolinghistoryApi.getList(this.$clearNull({ ...this.infoForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    // 搜索
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    handleDetail(id) {
      this.$refs.dialogForm.handleOpen(id)
    },
    // 分页
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    // 获取检查表单类型
    async getFormTypeList() {
      const res = await eFormCheckApi.getFormTypeList({ category: 4 })
      this.$set(this.selectList, 'formType', res.data)
    },
    statusFilter(val) {
      const statusMap = {
        'Pass': 'success',
        'Fail': 'danger',
        'COMPLETED': 'success',
        'STARTED': 'danger'
      }
      return statusMap[val]
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form{
    padding-top: 10px;
    .el-form-item:last-child{
        margin:0 0 15px 0;
    }
}
.table-cell{
  padding: 0 5px;
  font-size: 12px;
}
</style>
